<template>
  <a-card>
    <div>
        <div class="operator">
            <a-button @click="showModal" type="primary" class="mr">新建</a-button>
        </div>
      <standard-table
        :columns="columns"
        :dataSource="dataSource"
        :selectedRows.sync="selectedRows"
        :row-selection="rowSelection"
        @clear="onClear"
        @change="onChange"
        @selectedRowChange="onSelectChange"
      >
        <div slot="menuType" slot-scope="{ record }">
            <template v-if="record.menutype">
               <span v-if="record.menutype == 0">目录</span>
               <span v-if="record.menutype == 1">菜单</span>
               <span v-if="record.menutype == 2">按钮</span>
               <span v-if="record.menutype == 3">功能</span>
            </template>
            <template v-else></template>
        </div>
        <div slot="icon" slot-scope="{ record }">
            <template v-if="record.icon">
                <a-icon v-if="getTheme(record.icon) === 'outlined'" :type="record.icon.name"  />
                <a-icon v-else :type="record.icon.name" :theme="getTheme(record.icon)" />
            </template>
            <template v-else></template>
        </div>
        <div slot="action" slot-scope="{ record }">
          <a @click="addRow(record.id)">
            <a-icon type="delete" />新增
          </a>
          <a @click="editRow(record.id)">
            <a-icon type="delete" />修改
          </a>
          <a @click="removeRow(record.id)">
            <a-icon type="delete" />删除
          </a>
        </div>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table>
    </div>
    <menu-form ref="form" :menuList="dataSource" @reload="getMenuList" :id="id" @close="dialogClose"></menu-form>
  </a-card>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import MenuForm from './MenuForm.vue'
import { listToTree } from '@/utils/transform.js'
import { getMenuList, deleteMenu } from '@/services/menu'
import { STATE_SUCCESS } from '@/services/api.js'

const columns = [
  {
    title: '菜单名称',
    dataIndex: 'name'
  },
  {
    title: '菜单类型',
    dataIndex: 'menutype',
    scopedSlots: { customRender: 'menuType' }
  },
  {
    title: '菜单图标',
    dataIndex: 'icon',
    scopedSlots: { customRender: 'icon' }
  },
  {
    title: '菜单排序',
    dataIndex: 'level',
    sorter: true
  },
  {
    title: '权限',
    dataIndex: 'role'
  },
  {
    title: '路由',
    dataIndex: 'routerpath',
  },
  {
    title: '组件地址',
    dataIndex: 'resourcepath',
  },
  {
    title: '菜单URL',
    dataIndex: 'url',
    width: 200
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

export default {
    name: 'QueryList',
    components: { StandardTable, MenuForm },
    data () {
        return {
            advanced: true,
            columns: columns,
            dataSource: [],
            selectedRows: [],
            fileList: [],
            uploading: false,
            ModalText: 'Content of the modal',
            visible: false,
            confirmLoading: false,
            id: undefined,
            rowSelection
        }
    },
    authorize: {
        deleteRecord: 'delete'
    },
    methods: {
        deleteRecord(key) {
            this.dataSource = this.dataSource.filter(item => item.key !== key)
            this.selectedRows = this.selectedRows.filter(item => item.key !== key)
        },
        toggleAdvanced () {
            this.advanced = !this.advanced
        },
        removeRow (id) {
            let that = this;
            this.$confirm({
                title: '提示',
                content: "确认删除菜单吗？",
                okText: '确认',
                cancelText: '取消',
                onOk: () => {
                    deleteMenu({id}).then(res => {
                        let { state, data } = res.data.result
                        if (state == STATE_SUCCESS) {
                            this.getMenuList()
                        } else {
                            this.$message.error(data);
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                },
                onCancel() {
                    that.$destroyAll();
                },
            });
        },
        addRow (id) {
            this.$refs['form'].form.parentid = id
            this.$refs['form'].visible = true
        },
        editRow (id) {
            console.log(id)
            this.id = id
            this.$refs['form'].visible = true
        },
        onClear() {
            this.$message.info('您清空了勾选的所有行')
        },
        onStatusTitleClick() {
            this.$message.info('你点击了状态栏表头')
        },
        onChange() {
            this.$message.info('表格状态改变了')
        },
        onSelectChange() {
            this.$message.info('选中行改变了')
        },
        handleMenuClick (e) {
            if (e.key === 'delete') {
                this.remove()
            }
        },
        getMenuList () {
            getMenuList().then(res => {
                let { data } = res.data.result
                data.map(item => {
                    item['key'] = item['id']
                    // item['icon'] = JSON.parse(item['icon'])
                })
                this.dataSource = listToTree(data)
            })
        },
        showModal() {
            this.visible = true;
            this.$refs['form'].visible = true
        },
        dialogClose () {
            this.id = undefined
        },
        getTheme(item) {
            if (item.theme == 'outline') return 'outlined'
            if (item.theme == 'fill') return 'filled'
            if (item.theme == 'twotone') return 'twoTone'
        }
    },
    created () {
        this.getMenuList()
    }
}
</script>

<style lang="less" scoped>
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  .mr {
      margin-right: 15px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
